<template>
    <div class="theme-content">
        <div class="theme-content-item">
            <div style="" ref='tablePagingFather'>
                <slot name="contentHeaderCustom"></slot>
                <tableHeader :pageInfo="tableItem.pageInfo" :operationItem="operationItem">
                    <template v-slot:customSearch>
                        <component :is="slots.customSearch" v-if="slots.customSearch"></component>
                    </template>
                    <template v-slot:customTableHeader>
                        <!-- <el-input v-model="input" placeholder="Please input" /> -->
                        <component :is="slots.customTableHeader" v-if="slots.customTableHeader"></component>
                    </template>
                </tableHeader>
            </div>
            <tableVue v-loading="props.tableItem.loading" :tableItem="tableItem">
                <template v-slot:footerCustom>
                    <component :is="slots.footerCustom" v-if="slots.footerCustom"></component>
                </template>
                <template v-slot:actionCustom="scope">
                    <component :is="slots.actionCustom" :scope="scope" v-if="slots.actionCustom"></component>
                </template>
            </tableVue>
        </div>
    </div>
</template>
<script setup>
import tableVue from './table'
import tableHeader from './table-header'
import { onMounted, reactive, ref, useSlots } from 'vue'
import { publicApi } from '@/api/public'
const tablePagingFather = ref('')
const input = ref('')
const slots = useSlots()
const props = defineProps({
    tableItem: { default: function () { return {} } },
    operationItem: { default: function () { return {} } },
})
onMounted(() => {
    props.operationItem.SearchItem.map((item) => {
        item.valueInit ? props.tableItem.pageInfo.request[item.code] = item.valueInit : ''
    })
    if (props.tableItem.pageInfo.url) {
        const url = props.tableItem.pageInfo.url
        const method = props.tableItem.pageInfo.method || 'POST'
        const request = props.tableItem.pageInfo.request || {}
        props.tableItem.pageInfo.paging = () => {
          props.tableItem.loading = true
          publicApi(url, method, request).then((res) => {
                if (res.rows) {
                    props.tableItem.tableData.data = res.rows || [];
                    props.tableItem.tableData.total = res.total || 0
                }
                if (res.data) {
                    props.tableItem.tableData.data = res.data || [];
                    props.tableItem.tableData.total = res.total || 0
                }
              props.tableItem.loading = false
            }).catch(() => { props.tableItem.loading = false })
        }
    }
    if (props.tableItem.pageInfo.closeMountedPaging) { return }
    props.tableItem.pageInfo.paging()
})
</script>

<style></style>
